import * as echarts from 'echarts'
import { useRef, useEffect } from 'react'
import React from 'react'


const echartInit = (barDom, title, xData, yData) => {
  echarts.init(barDom.current).setOption({
    title: {
      text: title
    },
    xAxis: {
      data: xData
    },
    yAxis: {
    },
    series: [
      {
        data: yData,
        type: 'bar'
      }
    ]
  })
}

export default function Bar({ style, xData, yData, title }) {
  const barDom = useRef()
  useEffect(() => {
    echartInit(barDom, title, xData, yData)
  }, [barDom, title, xData, yData])
  return (
    <div ref={barDom} style={style}></div>
  )
}
